// 患者历史问诊记录组件


import React, { useEffect, useCallback } from 'react';
import { List, Image, Button, Toast, InfiniteScroll, PullToRefresh } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';
import { useAppDispatch, useAppSelector } from '../../store/hooks';
import { fetchHistoryRecords, resetHistory } from '../../store/slices/historySlice';

/**
 * 每页显示的记录数量
 * @constant PAGE_SIZE
 */
const PAGE_SIZE = 5;

/**
 * 医生历史问诊记录组件
 * 显示医生的历史问诊记录列表，支持下拉刷新和无限滚动
 * @component DoctorHistory
 * @returns {JSX.Element} 历史问诊记录列表组件
 */
const DoctorHistory: React.FC = () => {
    const navigate = useNavigate();
    const dispatch = useAppDispatch();
    const { records, loading, hasMore, page, error } = useAppSelector((state) => state.history);

    /**
     * 加载历史记录
     * @function loadRecords
     * @param {boolean} reset - 是否重置列表
     */
    const loadRecords = useCallback(async (reset = false) => {
        if (loading) return;
        try {
            await dispatch(fetchHistoryRecords({ page, count: PAGE_SIZE })).unwrap();
        } catch (error) {
            if (error === '请先登录') {
                navigate('/login');
            }
        }
    }, [dispatch, page, loading, navigate]);

    // 组件挂载时加载初始数据
    useEffect(() => {
        loadRecords(true);
    }, []);

    /**
     * 处理下拉刷新
     * @function onRefresh
     */
    const onRefresh = useCallback(async () => {
        dispatch(resetHistory());
        await loadRecords(true);
    }, [dispatch, loadRecords]);

    // 显示错误信息
    if (error) {
        Toast.show({ content: error, position: 'center' });
    }

    return (
        <div>
            {/* 页面标题 */}
            <div style={{ fontWeight: 600, fontSize: 18, padding: 16 }}>历史问诊</div>
            
            {/* 下拉刷新容器 */}
            <PullToRefresh onRefresh={onRefresh}>
                {/* 问诊记录列表 */}
                <List>
                    {records.map(item => (
                        <List.Item
                            key={item.recordId}
                            // 用户头像
                            prefix={<Image src={item.userHeadPic} width={60} height={60} fit="cover" style={{ borderRadius: 8 }} />}
                            // 问诊时间
                            description={
                                <>
                                    <div>问诊时间：{new Date(item.inquiryTime).toLocaleString()}</div>
                                </>
                            }
                            // 操作按钮
                            extra={
                                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                                    {/* 查看问诊记录按钮 */}
                                    <Button
                                        color="primary"
                                        size="small"
                                        onClick={() => navigate(`/doctor/inquiry/chat/${item.recordId}`)}
                                    >
                                        查看问诊记录
                                    </Button>
                                    {/* 评价按钮 */}
                                    <Button
                                        color="primary"
                                        size="small"
                                        disabled={item.status === 2}
                                        onClick={() => navigate(`/doctor/inquiry/evaluate/${item.recordId}`)}
                                    >
                                        {item.status === 2 ? '已评价' : '去评价'}
                                    </Button>
                                </div>
                            }
                        >
                            {item.nickName}
                        </List.Item>
                    ))}
                </List>
                {/* 无限滚动加载更多 */}
                <InfiniteScroll loadMore={() => loadRecords()} hasMore={hasMore} />
            </PullToRefresh>
        </div>
    );
};

export default DoctorHistory; 